<template>
  <div>
    <el-dialog :title="doTitle" :visible.sync="clothingUpdateAddStatus" width="70%" :show-close=showClose :close-on-click-modal="false">
      <div class="table" v-if="doType == 'update'">
        <table class="mt">
          <thead>
          <tr class="tr1">
            <td>id</td><td>类型</td><td>品牌</td><td>图片</td><td>金额</td><td>库存</td>
          </tr>
          </thead>
          <tbody>
          <tr class="tr2"><td>{{list.rowId}}</td><td>{{list.rowType}}</td><td>{{list.rowBrand}}</td>
            <td>
              <img :src="list.rowImage" style="width: 50px;height: 50px;">
            </td>
            <td>{{list.rowPrice}}</td>
            <td>{{list.rowWare}}</td>
          </tr>
          </tbody>
        </table>
        <table class="mt" style="table-layout:fixed;">
          <tbody>
          <tr class="tr3">
            <td style="width: 40px;height: 70px">标题</td>
            <td class="title" style="width: 700px;word-break: break-word;display: block">
            {{list.rowTitle}}
            </td>
          </tr>
          </tbody>
        </table>

      </div>
        <div style="margin-top: 30px">
          <div class="form">
            <el-form ref="form" label-width="80px" :rules="rules" :model="form" class="demo-ruleForm" hide-required-asterisk  >
              <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="类型">
                <el-input v-model="form.type"></el-input>
              </el-form-item>
              <el-form-item label="品牌">
                <el-input v-model="form.brand"></el-input>
              </el-form-item>
              <el-form-item label="金额" prop="price">
                <el-input v-model.number="form.price" placeholder="单位：元" ></el-input>
              </el-form-item>
              <el-form-item label="图片">
                <div style="width: 500px;height: 100px;">
                 <span style="float: left;margin-top: 10px">
                    <input type="file" @change="updateImg($event)">
                 </span>
                  <span v-if="uploaldImage!=null">
                  <img :src='uploaldImage' width="100px" height="100px" style="border-radius: 3px">
                </span>
                </div>
              </el-form-item>
              <el-form-item label="详细参数">
                <el-button type="info" plain @click="updateParam" class="paramButton" v-if="doType == 'update'">查看详细参数</el-button>
                <el-button type="info" plain @click="addParamDialog" class="paramButton" v-if="doType == 'add'">添加详细参数</el-button>
                <div  style="width: 70%;height: 60px;float: right"><p style="line-height: 0">数据后端会自动识别处理</p><p style="line-height: 0">{{form.paramMap}}</p></div>
              </el-form-item>
            </el-form>
          </div>
          <div style="width: 100%;height: 300px;" v-if="doType =='add'">
            <h3 style="line-height: 20px">颜色，尺寸，数量</h3>
            <ul>
              <li><input type="text" placeholder="颜色" v-model="colorSizeNumList.color1"></li>
              <li><input type="text" placeholder="尺寸" v-model="colorSizeNumList.size1"></li>
              <li><input type="text" placeholder="请手动输入数量" v-model="colorSizeNumList.num1"></li>
            </ul>
            <ul>
              <li><input type="text" placeholder="颜色" v-model="colorSizeNumList.color2"></li>
              <li><input type="text" placeholder="尺寸" v-model="colorSizeNumList.size2"></li>
              <li><input type="text" placeholder="请手动输入数量" v-model="colorSizeNumList.num2"></li>
            </ul>
            <ul>
              <li><input type="text" placeholder="颜色" v-model="colorSizeNumList.color3"></li>
              <li><input type="text" placeholder="尺寸" v-model="colorSizeNumList.size3"></li>
              <li><input type="text" placeholder="请手动输入数量" v-model="colorSizeNumList.num3"></li>
            </ul>
            <ul>
              <li><input type="text" placeholder="颜色" v-model="colorSizeNumList.color4"></li>
              <li><input type="text" placeholder="尺寸" v-model="colorSizeNumList.size4"></li>
              <li><input type="text" placeholder="请手动输入数量" v-model="colorSizeNumList.num4"></li>
            </ul>

          </div>
        </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clothingUpdateAddStatusClose">取 消</el-button>
        <el-button type="primary" @click="update" v-if="doType == 'update'">修 改</el-button>
        <el-button type="primary" @click="add" v-if="doType == 'add'">添 加</el-button>
      </span>
    </el-dialog>
<!--    详细参数，新增，修改-->
    <clothing-param
        :clothing-param-status="clothingParamStatus"
        @clothingParamStatusClose="clothingParamStatusClose"
        @addParam="addParam"
        :param="listMap"
        :do-type="paramDoType"
    ></clothing-param>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import clothingParam from './clothing-param'
import myUploald from "../../utils/myUploald";
import store from '@/store/index'
import ElementUI from "_element-ui@2.15.6@element-ui";
export default {
//import引入的组件需要注入到对象中才能使用
components: {
  clothingParam
},
props: {
  clothingUpdateAddStatus:false,
  list:{
    rowId: null,
    rowTitle:String,
    rowType:String,
    rowBrand:String,
    rowWare:String,
    rowImage:String,
    rowPrice:null,
  },
  doType: String
},
data() {
//这里存放数据
return {
  form:{
    id:null,
    title:"",
    type:"",
    brand:"",
    sizeList:"",
    colorList:"",
    price:0,
    paramMap:"",
    image:"",
    colorSizeNum:""
  },
  showClose:false,
  listMap:[],
  clothingParamStatus:false,
  listData:[{titileTab:null}],
  paramDoType:null,
  rules:{
    price: [{type: 'number', message: '金额必须为数字值'}]
  },
  colorSizeNumList:{
    color1:null,
    color2:null,
    color3:null,
    color4:null,
    size1:null,
    size2:null,
    size3:null,
    size4:null,
    num1:null,
    num2:null,
    num3:null,
    num4:null,
  }




};
},
//计算属性 类似于data概念
computed: {
  uploaldImage(){
    return store.state.common.uploaldFile
  },
  doTitle(){
    if (this.doType == "add"){
      return "服饰添加"
    }
    if (this.doType == "update"){
      return "服饰修改"
    }
  },

},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  clothingUpdateAddStatusClose(){
    // console.log("表单",this.form.paramMap)
    this.$emit("clothingUpdateAddStatusClose")
  },

  updateImg(imgInfo){
    if(imgInfo.target.files[0].type=="image/jpeg"){
      myUploald.uploald(imgInfo.target.files[0])
    }else {
      ElementUI.Message({
        message: "请选择图片，暂不支持其他格式",
        type: "error"
      })
    }
  },
  updateParam(){
    this.paramDoType = "update"
    this.$http({
      url: 'product/clothingspu/get',
      method: 'post',
      data: this.$http.adornData({
        id: this.list.rowId
      })
    }).then((res)=>{
      this.listMap = res.data.data.listMap
    })
    this.clothingParamStatus = true
  },
  clothingParamStatusClose(){
    this.clothingParamStatus = false
  },
  addParam(data){
    // console.log(data)
    this.form.paramMap = data
    this.clothingParamStatus = false
  },
  addParamDialog(){
    this.paramDoType = "add"
    this.clothingParamStatus = true
  },
  //修改
  update(){
    if (this.list.rowId!=0){
      this.$http({
        url: 'product/clothingspu/update',
        method: 'post',
        data: this.$http.adornData({
          id:this.list.rowId,
          title: this.form.title,
          type: this.form.type,
          brand: this.form.brand,
          price: this.form.price,
          image: store.state.common.uploaldFile,
        })
      }).then((res)=>{
        this.form = null;
        store.commit("uploaldFile",null)
      })
    }
    store.commit("uploaldFile",null)
    this.$emit("updateStatus")
  },
  add(){
    this.$http({
      url: 'product/clothingspu/add',
      method: 'post',
      data: this.$http.adornData({
        title: this.form.title,
        type: this.form.type,
        brand: this.form.brand,
        price: this.form.price,
        image: store.state.common.uploaldFile,
        paramMap: this.form.paramMap,
        roleId: sessionStorage.getItem("roleId"),
        devColorSizeNum:"["+"color="+this.colorSizeNumList.color1+","+"size="+this.colorSizeNumList.size1+","+"num="+this.colorSizeNumList.num1+"]"
        +"|"+"["+"color="+this.colorSizeNumList.color2+","+"size="+this.colorSizeNumList.size2+","+"num="+this.colorSizeNumList.num2+"]"
        +"|"+"["+"color="+this.colorSizeNumList.color3+","+"size="+this.colorSizeNumList.size3+","+"num="+this.colorSizeNumList.num3+"]"
        +"|"+"["+"color="+this.colorSizeNumList.color4+","+"size="+this.colorSizeNumList.size4+","+"num="+this.colorSizeNumList.num4+"]"
      })
    }).then((res)=>{
      // console.log(res)
      console.log(res)
      if (res.data.status != 0){
        ElementUI.Message({
          message: '成功添加第：'+res.data.status+'服装类件商品',
          type: 'success'
        })

      }

      store.commit("uploaldFile",null)
    })
    this.$emit("updateAdd")

  }


},
//声明周期 - 创建完成（可以访问当前this实例）
created() {},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.table{
  margin: 0 auto;
}
table.mt {
  width: 1000px;
  border-spacing: 0px;
  border-right:1px solid #aaa;
  border-bottom:1px solid #aaa;
}

table.mt td {
  border-left:1px solid #aaa;
  border-top:1px solid #aaa;
  padding:10px;

}
table.mt thead tr {
  background: #50b6bf;
  color: #fff;
}
table.mt .tr2>td{
  height: 30px;
}
table.mt .tr1>td{
  height: 20px;
}
.form{

  margin: 0 auto;
  width: 70%;
}
.paramButton{
  float: left;
}
.tr3>.title{
  line-height: 20px !important;
}
ul li{
  list-style: none;
  line-height: 50px;
}
ul>li{
  float: left;
  width: 30%;
  /*background-color: red;*/
  margin-left: 10px;
  margin-top: 5px;
}
ul>li>input{
  width: 90%;
  height: 40px;
  /*outline: none;*/
  outline-color: #61acfc;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.18);



}
</style>
